<!--
 * @Author: dengyongliang
 * @Date: 2021-04-14 16:12:55
 * @LastEditTime: 2021-08-16 13:38:19
 * @LastEditors: dengyongliang
 * @Description:
-->
<template>
  <div>
    <el-divider content-position="left">样式一</el-divider>
    <div style="background: #eaeaea; padding: 20px;">
      <si-container type="1">
        <template slot="left">主体内容-文本</template>
        <template slot="right">右侧文本</template>
        <template
          slot="cont"
        >该插槽跟模板的其它地方一样可以访问相同的实例 property
          (也就是相同的“作用域”)，而不能访问 的作用域。例如 url
          是访问不到的：</template>
      </si-container>
    </div>

    <el-divider content-position="left">样式二</el-divider>
    <div style="background: #eaeaea; padding: 20px;">
      <si-container type="2">
        <template slot="left">主体内容-文本</template>
        <template slot="right">右侧文本</template>
        <template
          slot="cont"
        >该插槽跟模板的其它地方一样可以访问相同的实例 property
          (也就是相同的“作用域”)，而不能访问 的作用域。例如 url
          是访问不到的：</template>
      </si-container>
    </div>

    <el-divider content-position="left">样式三</el-divider>
    <div style="background: #eaeaea; padding: 20px;">
      <si-container type="3">
        <template slot="left">主体内容-文本</template>
        <template slot="right">右侧文本</template>
        <template
          slot="cont"
        >该插槽跟模板的其它地方一样可以访问相同的实例 property
          (也就是相同的“作用域”)，而不能访问 的作用域。例如 url
          是访问不到的：</template>
      </si-container>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DemoContainer',
  components: {},
  data() {
    return {}
  },
  methods: {}
}
</script>
<style scoped></style>
